<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>AJAX-JavaScript-WSCORE</title>
	<link href="../../theme/style.css" rel="stylesheet" type="text/css" />
	<script src="../../theme/browser.js" type="text/javascript"></script>
</head>
<body>
	<div class="header">
		<ol>
			<li><a href="../../index.html">首页</a></li>
			<li>ajax</li>
		</ol>
	</div>

	<h1>ajax</h1>
	<div class="intro">
		用途: 指定某元素(链接)以AJAX模式读取<br />
		示例: <a dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-demo]" href="#">代码片段</a> | 
		<a ajax href="demo.html" ajax-data="k1=v1&key2=v2&k3=v3" ajax-selector="#demo-container">DEMO</a>
		<p class="wrap" id="demo-container">点击DEMO, 将请求结果放入这里</p>
<!--CODE-BEGINE-->
<div code-demo style="display:none">
<code title="代码片段">// HTML
<a ajax href="demo.html">Demo1</a>
// jQuery
// 无特殊需求, 以下代码不需要编写
// HTML文档载入(更新)完成后自动执行
$('#example').wscbase_ajax();</code>
</div>
<!--CODE-FINISH-->
	</div>

	<h2>属性<em>HTML</em></h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>属性名</th>
					<th>属性值</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>必须</td>
					<td>ajax</td>
					<td>
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-get]">get</a>
						|
						<a href="demo.html" dialog dialog-width="500">post</a>
						<div code-ajax-get style="display:none">
							<code title="GET请求"><a ajax href="demo.html">GET请求1</a>
<a ajax="get" href="demo.html">GET请求2</a></code>
						</div>
						<div code-ajax-post style="display:none">
							<code title="POST请求"><a ajax="post" href="demo.html">POST请求</a></code>
						</div>
					</td>
					<td>值可以为空(默认：GET；当值为空时使用GET)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>ajax-href</td>
					<td>
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-url]">url</a>
						<div code-ajax-url style="display:none">
							<code title="请求URL"><a ajax href="demo.html">URL1</a>
<a ajax ajax-href="demo.html" href="#">URL2</a></code>
						</div>
					</td>
					<td>请求URL(当不指定时在href属性中读取)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>ajax-type</td>
					<td>
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-type-html]">html</a>
						|
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-type-json]">json</a>
						|
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-type-xml]">xml</a>
						|
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-type-script]">script</a>
						<div code-ajax-type-html style="display:none">
							<code title="HTML请求"><a ajax href="demo.html">HTML请求1</a>
<a ajax ajax-type="html" href="demo.html">HTML请求2</a></code>
						</div>
						<div code-ajax-type-json style="display:none">
							<code title="JSON请求"><a ajax ajax-type="json" href="demo.html">请求JSON</a></code>
						</div>
						<div code-ajax-type-xml style="display:none">
							<code title="XML请求"><a ajax ajax-type="xml" href="demo.html">请求XML</a></code>
						</div>
						<div code-ajax-type-script style="display:none">
							<code title="Script请求"><a ajax ajax-type="script" href="demo.html">请求Script</a></code>
						</div>
					</td>
					<td>请求URL返回内容格式</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>ajax-data</td>
					<td>
						<a href="#" dialog dialog-no-title="true" dialog-selector="[code-ajax-data]">string</a>
						<div code-ajax-data style="display:none">
							<code title="参数示例"><a ajax ajax-data="key=val&name=value" href="demo.html">示例格式</a></code>
						</div>
					</td>
					<td>附加请求参数</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>ajax-cache</td>
					<td>
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-cache-true]">true</a>
						|
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-cache-false]">false</a>
						<div code-ajax-cache-true style="display:none">
							<code title="启用缓存"><a ajax href="demo.html">启用1</a>
<a ajax ajax-cache="true" href="demo.html">启用2</a></code>
						</div>
						<div code-ajax-cache-false style="display:none">
							<code title="禁用缓存"><a ajax ajax-cache="false" href="demo.html">禁用</a></code>
						</div>
					</td>
					<td>结果缓存(默认: true)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>ajax-selector</td>
					<td>
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-selector]">jQuery</a> ( Selector )
						<div code-ajax-selector style="display:none">
							<code title="更新元素内容"><a ajax ajax-selector="#example" href="demo.html">更新Selector</a></code>
						</div>
					</td>
					<td>将请求到的结果，更新到jQuery-Selector元素中(规则同jQuery)</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>ajax-selector-append</td>
					<td>
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-selector-append]" dialog-selector-append="true">true</a>
						<div code-ajax-selector-append style="display:none">
							<code title="添加元素末尾"><a ajax ajax-selector="#example" ajax-selector-append="true" href="demo.html">添加到Selector结尾</a></code>
						</div>
					</td>
					<td>将请求到的结果，添加到jQuery-Selector末尾(规则同jQuery)</td>
				</tr>
				<tr>
					<td>保护</td>
					<td>ajax-inited</td>
					<td>true | false</td>
					<td>受保护方法禁止定义；否则会造成错误</td>
				</tr>
			</tbody>
		</table>
	</div>

	<h2>方法<em>jQuery</em></h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>方法名</th>
					<th>参数项</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>&#160;</td>
					<td>ajax-start</td>
					<td>
						<a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-start]">object</a>
						<div code-ajax-start style="display:none">
							<code title="接受参数">// HTML
<a ajax id="code-ajax-function-param" href="demo.html">链接</a>
// jQuery
$('#code-ajax-function-param').data({
	/*!
	* 接受参数
	* @param object obj, 当前请求触发元素(jQuery)
	* @param object cfg, 当前请求配置(Ajax配置)
	* @param string response, 请求结果
	*/
	'ajax-start' : function(obj, cfg){
		// 在此编写代码
	}, 
	'ajax-stop' : function(obj, cfg, response){
		// 在此编写代码
	}
});</code>
						</div>
					</td>
					<td>AJAX请求前执行start方法</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td>ajax-stop</td>
					<td><a href="#" dialog dialog-width="500" dialog-no-title="true" dialog-selector="[code-ajax-start]">object</a></td>
					<td>AJAX请求完成后执行stop方法</td>
				</tr>
			</tbody>
		</table>
	</div>
	


	
	
	
			
</body>
</html>